<template>
  <uni-popup ref="basePopupRef" type="center" background-color="#FFFFFF" borderRadius="20px">
    <view class="basic-flex-center basic-flex-column base-popup">
      <view class="title">{{ title }}</view>
      <image class="icon" :src="$utils.formatAttachmentUrl(icon)"></image>
      <view class="content" @click="makeAPhoneCall">{{ content }}</view>
    </view>
  </uni-popup>
</template>

<script>

export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
  },
  data() {
    return {};
  },
  methods: {
    open() {
      this.$refs.basePopupRef.open()
    },
    close() {
      this.$refs.basePopupRef.close()
      this.$emit('close')
    },
    confirm() {
      this.close()
    },
    makeAPhoneCall() {
      uni.makePhoneCall({
        phoneNumber: this.content //仅为示例
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.base-popup {
  background: linear-gradient(180deg, #BEEAD6 0%, #FFFFFF 100%);
  border-radius: 14px;
  padding: 14px 0px 20px;
  gap: 3px;
  width: 239px;

  & > .title {
    font-weight: bold;
    font-size: 15px;
    color: #000000;
  }

  & > .icon {
    width: 122px;
    height: 122px;
  }

  & > .content {
    font-weight: bold;
    font-size: 18px;
    color: #000000;
  }
}
</style>
